<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
		<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
	</head>
	<body>
		<select id="s1" placeholder="初始值" style="width: 80px;" class="js-example-basic-single" name="state" id="xilie"
			onchange="del(this)">
			<option value="1">2</option>
			<option value="1" selected="selected">3</option>
			<option value="1">4</option>
		</select>
		<input type="button" value="追加" onclick="ff()" />
		<input type="button" value="取消选中" onclick="remove()" />
		<input type="button" value="清空" onclick="clear()" />
		<select id="s3" placeholder="初始值" style="width: 80px;" class="js-example-basic-single" name="state" id="xilie"
			onchange="freshS4(this)">
			<option value="0">数字</option>
			<option value="1">大写</option>
			<option value="2">小写</option>
		</select>
		<select class="js-example-basic-single input-medium" style="width: 180px;" name="xilie" id="s4">
			<option value="-1">请选择</option>
		</select>
	</body>

	<script>
		let data = [
			[{
				'value': 1,
				'label': '标签1'
			}, {
				'value': 2,
				'label': '标签2'
			}],
			[{
				'value': 1,
				'label': '标签A'
			}, {
				'value': 2,
				'label': '标签B'
			}],
			[{
				'value': 1,
				'label': '标签a'
			}, {
				'value': 2,
				'label': '标签b'
			}]
		]
		// In your Javascript (external .js resource or <script> tag)
		jQuery.fn.removeSelected = function() {
			this.val("");
		};
		$(document).ready(function() {
			$('.js-example-basic-single').select2();
			$('#a').select2({
				placeholder: 'Select an option'
			});
		});

		function del(obj) {
			if (obj.value == 1) {
				$("#xilie").empty();
			}
		}

		function ff() {
			console.log("追加")
			$('#s1').append('<option value="WY">天空</option>');
		}

		function remove() {
			console.log("取消选中")
			$('#s1').val(null).trigger('change');
		}

		function clear() {
			console.log("取消选中")
		}

		function freshS4(obj) {
			let xilie = $("#s4");
			// xilie.select2({
			// 	placeholder: "请选择",
			// 	allowClear: true
			// });
			let value = obj.value;
			xilie.empty();
			xilie.append('<option value="-1">请选择</option>')
			for (let item of data[value]) {
				xilie.append('<option value="' + item.value + '">' + item.label + '</option>');
			}

		}
	</script>
</html>
